'use client';
import { SetStateAction, useState } from 'react';
import 'highlight.js/styles/vs2015.css';
import CodeEditor from '@/components/CodeEditor';
import { Button } from '@/components/ui/button';


export default function HtmlPreview() {
  const [htmlCode, setHtmlCode] = useState('<h1>Hello World</h1>');
  const [iframeKey, setIframeKey] = useState(0);
  const [isCode, setIsCode] = useState(true);
  return (
    // bg-gray-100
    <div className="flex flex-col h-screen gap-4 p-4 ">
        
        
        {isCode? (
            <>
          {/* 编辑器区域 */}
            <div className="flex-1 border rounded-lg overflow-hidden">
                <div className="flex gap-4 justify-end">
                    <Button onClick={()=>setIsCode(!isCode)} className="flex-0 w-[20%]">{isCode?'Preview':'Code'} </Button>
                </div>
                <CodeEditor 
                    initialValue={htmlCode}
                    onChange={(value: SetStateAction<string>) => {
                    setHtmlCode(value);
                    setIframeKey(prev => prev + 1);
                    }}
                />
            </div>
            </>
        ):
          (  
            <>{/* 预览区域 */}
            <div className="flex-1 border rounded-lg overflow-hidden bg-white w-full">
                <div className="flex gap-4 justify-end">
                    <Button onClick={()=>setIsCode(!isCode)} className="flex-0 w-[20%] ">{isCode?'Preview':'Code'} </Button>
                </div>
                <iframe
                    key={iframeKey}
                    className="w-full h-full"
                    sandbox="allow-scripts allow-modals allow-forms"
                    srcDoc={`<!DOCTYPE html>
                    <html>
                        <head>
                        <style>
                            body { padding: 20px; }
                            // Bug 修复：将 getStyle 改为 getStyles
                        
                        </style>
                        </head>
                        <body>${htmlCode}</body>
                    </html>`}
                />
            </div>
            </>
        )}
    </div>
  );
}
